<template>
	<u-navbar title="填写量化指标" left-icon-color="white" :placeholder="true" title-style="color:white" bgColor="#359FE3"
		:autoBack="true"></u-navbar>

	<view class="mt-3 p-2 w-80 mx-auto border border-gray-200">
		<u-steps current="1">
			<u-steps-item title="填写申请内容"></u-steps-item>
			<u-steps-item title="填写量化标准"></u-steps-item>
			<u-steps-item title="提交审核"></u-steps-item>
		</u-steps>
	</view>

	<view class="content">
		<uni-forms ref="formData"  errShowType="modal" :modelValue="formData" label-position="top" :rules="rules">

			<!-- 循环第一指标列表  -->
			<uni-section v-for="(diyizhibiao,diyiKey) in lianghuaList" :key="diyiKey" class="mt-10 mb-10"
				titleFontSize="40rpx" :padding="true" :title="diyiKey" type="line">
				<!-- 循环第二指标列表，如果第二指标的属性与第一指标相同，则显示该指标 -->
				<view v-for="(stu,index) in formData.allDierZhibiao">
					<uni-forms-item class="pt-4 pb-6" :name="['allDierZhibiao',index,'selectDisanId']"
						:rules="[{'required': true,errorMessage: '此项必选！'}]" :label="stu.dier" label-width="250" required
						v-if="diyiKey == stu.diyi">
						<!-- 展示问题选项【第三指标】 -->
						<u-radio-group v-model="formData.allDierZhibiao[index].selectDisanId" placement="column"
							@change="selectZhibiao">
							<template :key="index" v-for="(item, index) in stu.disanList">
								<view class="flex item-center mb-4">
									<u-radio shape="square" :label="item.disanZhibiao" :data-item="item"
										:name="item.id">
									</u-radio>
									<uni-tooltip class="ml-4 flex item-center" v-if="item.remark!=undefined"
										placement="bottom">
										<template v-slot:content>
											<view class="uni-stat-tooltip w-44">
												{{item.remark}}
											</view>
										</template>
										<image class="w-5 h-5" src="/static/images/help.png"></image>
									</uni-tooltip>
								</view>
							</template>
						</u-radio-group>
					</uni-forms-item>
				</view>

			</uni-section>


		</uni-forms>
		<button size="default" type="primary" @click="submit">提交</button>

	</view>

</template>

<script>
	import {
		loadLianghuaList,
		queryLianghua,
		saveStuLianghuaRecord
	} from '@/api/login.js'
	import {
		isIdCardNo
	} from '@/utils/common/validation-methods.js'
	import lodashFull from '@/uni_modules/iRainna-lodash/js_sdk/js/lodash.full.min.js'
	const {
		isNil,
		merge,
		cloneDeep
	} = lodashFull()

	export default {
		data() {
			return {
				studentId: '',
				/**
				 * 原始分层级的量化标准
				 */
				lianghuaList: [],
				/**
				 * 所有的三级指标
				 */
				disanzhibiaoList: [],
				zhibiaoIds: [],
				formData: {
					/**
					 * 所有的第二指标
					 */
					allDierZhibiao: [],
					/**
					 * 选中的第三指标
					 */
					stuLianghuaList: [],
					stuId: '',
					shenqingId: '',
					activityId: ''
				},
				rules: {
					fullname: {
						rules: [{
							required: true,
							errorMessage: '请填写姓名！'
						}]
					},

					idnumber: {
						rules: [{
								required: true,
								errorMessage: '请填写身份证号！'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									return isIdCardNo(value)
								},
								errorMessage: '身份证号格式有误！'
							}
						]
					}
				}
			}
		},
		watch: {
			'formData.stuLianghuaList':{
				handler(newVal) {
					this.setFormCache()
				},
				deep:true
			}
		},
		onLoad(option) {
			if (!isNil(option.studentId)) {
				this.studentId = option.studentId
				this.formData.shenqingId = option.shenqingId
				this.formData.activityId = option.activityId
				this.formData.stuId = option.studentId
			}

			this.setDefaultValue()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},

			selectZhibiao(value) {
				this.disanzhibiaoList.forEach(item => {
					if (item.id == value) {
						//先移除之前选中的三级指标，然后再添加新选中的三级指标
						this.removeDisanZhibiao(item.diyiZhibiao, item.dierZhibiao)
						this.formData.stuLianghuaList.push(item)
					}
				})
			},
			removeDisanZhibiao(diyiZhibiao, dierZhibiao) {
				this.formData.stuLianghuaList = this.formData.stuLianghuaList.filter((item) => {
					return item.diyiZhibiao != diyiZhibiao || item.dierZhibiao != dierZhibiao
				})
			},
			setFormCache(){				
				let data
				let storageInfo = uni.getStorageInfoSync()
				if(storageInfo.keys.includes("lianghuaDataArr")){
					data = JSON.parse(uni.getStorageSync('lianghuaDataArr'))
				}else{
					data = new Object()
				}
			
				data[this.studentId] = this.formData
				uni.setStorageSync('lianghuaDataArr', JSON.stringify(data))
			},
			hasFormCache(){
				let storageInfo = uni.getStorageInfoSync()
				if(storageInfo.keys.includes("lianghuaDataArr")){
					let data = JSON.parse(uni.getStorageSync("lianghuaDataArr"))
					return !isNil(data[this.studentId])
				}else{
					return false
				}
			},
			getFormCache(){
				if(this.hasFormCache()){
					let data = JSON.parse(uni.getStorageSync("lianghuaDataArr"))
					return data[this.studentId]
				}
				return null
			},
			removeFormCache(){
				if(this.hasFormCache()){
					let lianghuaDataArr = JSON.parse(uni.getStorageSync("lianghuaDataArr"))
					delete lianghuaDataArr[this.studentId]
					uni.setStorageSync('lianghuaDataArr', JSON.stringify(lianghuaDataArr))
				}
			},
			async setDefaultValue() {
				let that = this
				let res = await loadLianghuaList(this.studentId)
				if (res.success) {
					const lianghuaList = res.lianghuaList
					this.lianghuaList = lianghuaList

					//加载量化指标数据
					let lianghua_data_res = await queryLianghua(this.studentId, this.formData.activityId, this.formData
						.shenqingId)
					let lianghuaStudentRecords = lianghua_data_res.lianghuaStudentRecords
					

					//
					for (let diyizhibiao in lianghuaList) {
						for (let dierzhibiao in lianghuaList[diyizhibiao]) {
							let selectDisanId = ''
							if(lianghuaStudentRecords!=undefined&&lianghuaStudentRecords.length>0){
								lianghuaList[diyizhibiao][dierzhibiao].forEach(disan=>{
									
									lianghuaStudentRecords.forEach(lianghua=>{
										if(disan.diyiZhibiao==lianghua.diyiZhibiao&&disan.dierZhibiao==lianghua.dierZhibiao&&disan.disanZhibiao==lianghua.disanZhibiao){
											selectDisanId = disan.id
											this.formData.stuLianghuaList.push(disan)
										}
									})
								})
							}
							
							that.formData.allDierZhibiao.push({
								diyi: diyizhibiao,
								dier: dierzhibiao,
								selectDisanId: selectDisanId,
								disanList: lianghuaList[diyizhibiao][dierzhibiao]
							})
							lianghuaList[diyizhibiao][dierzhibiao].forEach(disanzhibiao => {
								that.disanzhibiaoList.push(disanzhibiao);
							})
						}
					}
					if(this.hasFormCache()){
						this.formData = this.getFormCache()
					}
				}
			},
			submit() {
				this.$refs.formData.validate().then(res => {
					saveStuLianghuaRecord(this.formData).then(res => {
						if (res.success) {
							this.removeFormCache()
							uni.showToast({
								title: res.msg,
								complete: () => {
									uni.redirectTo({
										url: '/pages/index/index'
									})
								}
							})
						}else{
							uni.showToast({
								icon: "fail",
								title: res.msg
							});
						}
					})
				})

			}

		}
	}
</script>

<style>
	.nav-title {
		font-size: 40rpx;
		width: 100%;
		text-align: center;
	}

	.content {
		padding: 40rpx;
	}

	.justify-start {
		justify-content: start !important;
	}
</style>